<!-- global-header/index.vue -->
<template>
    <div class="global-header" :class="headerClasses" :style="headerStyles">
      
      <!-- 🎯 左侧区域 -->
      <div class="header-left">
        <!-- Logo (水平布局显示) -->
        <GlobalLogo v-if="showLogo" :show-title="true" />
        
        <!-- 🔧 菜单切换器 (直接实现) -->
        <el-button
          v-if="showMenuToggler"
          text
          :icon="siderCollapsed ? Expand : Fold"
          @click="handleToggleSidebar"
          class="menu-toggler"
          :title="siderCollapsed ? '展开菜单' : '折叠菜单'"
        />
        
        <!-- 水平菜单容器 (Teleport 目标) -->
        <div v-if="showMenu" id="header-menu-container" class="header-menu-container"></div>
        
        <!-- 面包屑 (非水平布局显示) -->
        <GlobalBreadcrumb 
          v-if="!showMenu && showBreadcrumb && !isMobile" 
          class="header-breadcrumb"
        />
      </div>
      
      <!-- 🎯 右侧功能区域 -->
      <div class="header-right">
        
        <!-- 🔍 全局搜索 -->
        <!-- <GlobalSearch /> -->
        
        <!-- 🖥️ 全屏切换 (直接实现) -->
        <el-button
          v-if="!isMobile"
          text
          :icon="isFullscreen ? Rank : FullScreen"
          @click="toggleFullscreen"
          class="fullscreen-toggle"
          :title="isFullscreen ? '退出全屏' : '进入全屏'"
        />
        
        <!-- 🎨 布局设置按钮 -->
        <el-button
          text
          :icon="Setting"
          @click="openLayoutDrawer"
          class="layout-setting-toggle"
          title="布局设置"
        />
        
        <!-- 🎨 主题切换 (集成你的 useTheme) -->
        <el-dropdown @command="handleThemeCommand" class="theme-dropdown">
          <el-button text :icon="isDark ? Sunny : Moon" class="theme-toggle">
            <el-icon class="theme-icon">
              <component :is="isDark ? Sunny : Moon" />
            </el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item 
                v-for="option in themeModeOptions" 
                :key="option.value"
                :command="{ type: 'mode', value: option.value }"
                :class="{ 'is-active': themeMode === option.value }"
              >
                <el-icon><component :is="getThemeIcon(option.icon)" /></el-icon>
                {{ option.label }}
              </el-dropdown-item>
              <el-dropdown-item divided :command="{ type: 'setting' }">
                <el-icon><Setting /></el-icon>
                主题设置
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        
        <!-- 👤 用户头像下拉 (直接实现) -->
        <el-dropdown @command="handleUserCommand" class="user-dropdown">
          <div class="user-avatar">
            <el-avatar 
              size="small" 
              :src="userInfo.avatar" 
              class="user-avatar-img"
            >
              {{ userInfo.name.charAt(0).toUpperCase() }}
            </el-avatar>
            <span v-if="!isMobile" class="username">{{ userInfo.name }}</span>
            <el-icon v-if="!isMobile" class="dropdown-icon"><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="{ type: 'profile' }">
                <el-icon><User /></el-icon>
                个人中心
              </el-dropdown-item>
              <el-dropdown-item :command="{ type: 'settings' }">
                <el-icon><Setting /></el-icon>
                账户设置
              </el-dropdown-item>
              <el-dropdown-item divided :command="{ type: 'logout' }">
                <el-icon><SwitchButton /></el-icon>
                退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { useFullscreen } from '@vueuse/core'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {
    Fold,
    Expand,
    FullScreen,
    Rank,
    Sunny,
    Moon,
    User,
    Setting,
    SwitchButton,
    ArrowDown,
    Monitor
  } from '@element-plus/icons-vue'
  
  // Composables
  import { useLayoutManage } from '@/layouts/layoutManage.js'
  import { useTheme } from '@/composables/useTheme.js'
  import { useDevice } from '@/composables/useDevice.js'
  import { useLayoutDrawer } from '@/composables/useLayoutDrawer.js'
  
  // Components
  import GlobalLogo from '../global-logo/index.vue'
  import GlobalBreadcrumb from '../global-breadcrumb/index.vue'
  // import GlobalSearch from '../global-search/index.vue'
  
  // 🎯 Props 接收
  const props = defineProps({
    showLogo: Boolean,
    showMenu: Boolean,
    showMenuToggler: Boolean,
    showBreadcrumb: Boolean,
    height: {
      type: Number,
      default: 56
    }
  })
  
  // 🎯 Composables
  const router = useRouter()
  const { isMobile } = useDevice()
  const { isFullscreen, toggle: toggleFullscreen } = useFullscreen()
  
  // 布局管理
  const {
    layoutSetting,
    siderProps,
    toggleSidebar
  } = useLayoutManage()
  
  // 主题管理
  const {
    themeMode,
    themeColor,
    isDark,
    setThemeMode,
    setThemeColor,
    themeModeOptions,
    themeColorOptions
  } = useTheme()
  
  // 布局抽屉管理
  const { openDrawer: openLayoutDrawer } = useLayoutDrawer()
  
  // 🎯 本地状态
  const userInfo = ref({
    name: 'Admin',
    avatar: '',
    email: 'admin@example.com'
  })
  
  // 🎯 计算属性
  const headerClasses = computed(() => [
    'header-container',
    {
      'header-mobile': isMobile.value,
      'header-with-menu': props.showMenu,
      'header-dark': isDark.value
    }
  ])
  
  const headerStyles = computed(() => ({
    height: `${props.height}px`
  }))
  
  const siderCollapsed = computed(() => {
    const collapsed = siderProps.value?.collapsed || false
    console.log('🔍 [GlobalHeader] siderCollapsed:', collapsed, 'siderProps:', siderProps.value)
    return collapsed
  })
  
  // 🎯 事件处理
  
  // 🔧 菜单切换处理
  function handleToggleSidebar() {
    toggleSidebar()
    ElMessage.success(siderCollapsed.value ? '菜单已展开' : '菜单已折叠')
  }
  
  // 🎨 主题切换处理
  function handleThemeCommand(command) {
    switch (command.type) {
      case 'mode':
        setThemeMode(command.value)
        ElMessage.success(`已切换到${themeModeOptions.find(opt => opt.value === command.value)?.label}`)
        break
      case 'setting':
        // 打开主题设置面板（后续实现）
        console.log('打开主题设置')
        break
    }
  }
  
  // 👤 用户操作处理
  function handleUserCommand(command) {
    switch (command.type) {
      case 'profile':
        router.push('/user/profile')
        break
      case 'settings':
        router.push('/user/settings')
        break
      case 'logout':
        handleLogout()
        break
    }
  }
  
  // 🚪 退出登录
  function handleLogout() {
    ElMessageBox.confirm(
      '确定要退出登录吗？',
      '确认退出',
      {
        type: 'warning',
        confirmButtonText: '退出',
        cancelButtonText: '取消'
      }
    ).then(() => {
      // 清除本地存储
      localStorage.clear()
      
      // 跳转到登录页
      router.push('/login')
      
      ElMessage.success('已退出登录')
    }).catch(() => {
      // 用户取消
    })
  }
  
  // 🎯 主题图标映射
  function getThemeIcon(iconName) {
    const iconMap = {
      'sun': Sunny,
      'moon': Moon,
      'computer': Monitor
    }
    return iconMap[iconName] || Sunny
  }
  </script>
  
  <style lang="scss" scoped>
  .global-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color-light);
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    position: relative;
    z-index: 1000;
    
    // 🎯 左侧区域
    .header-left {
      display: flex;
      align-items: center;
      gap: 16px;
      flex: 1;
      min-width: 0;
      
      .menu-toggler {
        padding: 8px;
        
        &:hover {
          background: var(--el-bg-color-page);
        }
      }
      
      .header-menu-container {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        min-width: 0;
      }
      
      .header-breadcrumb {
        flex: 1;
        margin-left: 16px;
        min-width: 0;
      }
    }
    
    // 🎯 右侧功能区
    .header-right {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
      
      .fullscreen-toggle,
      .layout-setting-toggle,
      .theme-toggle {
        padding: 8px;
        font-size: 18px;
        
        &:hover {
          background: var(--el-bg-color-page);
        }
      }
      
      // 🎨 布局设置按钮特殊样式
      .layout-setting-toggle {
        color: var(--el-color-primary);
        
        &:hover {
          background: var(--el-color-primary-light-9);
        }
      }
      
      // 🎨 主题下拉样式
      .theme-dropdown {
        .theme-icon {
          font-size: 16px;
        }
      }
      
      // 👤 用户头像样式
      .user-dropdown {
        .user-avatar {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 4px 8px;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.3s;
          
          &:hover {
            background: var(--el-bg-color-page);
          }
          
          .user-avatar-img {
            flex-shrink: 0;
          }
          
          .username {
            font-size: 14px;
            color: var(--el-text-color-primary);
            font-weight: 500;
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          
          .dropdown-icon {
            font-size: 12px;
            color: var(--el-text-color-regular);
            transition: transform 0.3s;
          }
        }
        
        // 🎯 下拉菜单激活状态
        &:hover .dropdown-icon {
          transform: rotate(180deg);
        }
      }
    }
    
    // 🎯 移动端适配
    &.header-mobile {
      padding: 0 16px;
      
      .header-left {
        gap: 12px;
        
        .header-breadcrumb {
          display: none; // 移动端隐藏面包屑
        }
      }
      
      .header-right {
        gap: 8px;
        
        .username {
          display: none; // 移动端隐藏用户名
        }
      }
    }
    
    // 🎯 深色模式适配
    &.header-dark {
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    }
  }
  
  // 🎯 下拉菜单项激活状态
  :deep(.el-dropdown-menu__item.is-active) {
    background: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }
  </style>